<template>
  <transition
    enter-active-class="animate__animated animate__fadeInUp"
    leave-active-class="animate__animated animate__fadeOutDown"
  >
    <div class="full">
      <div class="bg" :style="{ backgroundImage }"></div>
      <div class="content">
        <span @click.stop="$emit('escfull', false)"></span>
        <img
          class="music-img"
          :src="currentMusic.picUrl || currentMusic.al.picUrl"
          :style="{ animationPlayState: isplay ? 'running' : 'paused' }"
          @click="changeplay"
        />
        <div class="author">
          <p>{{ currentMusic.name }}</p>
          <h3
            v-for="(artists, i) in currentMusic.song.artists"
            :key="i + artists"
          >
            {{ artists.name }}
          </h3>
        </div>
        <div class="play_icon" @click="changeplay">
          <img v-if="isplay" src="../assets/images/stop_icon.png" alt="" />
          <img v-else src="../assets/images/play_icon.png" alt="" />
        </div>
      </div>
      <div class="lyric">
        <ul :style="{ transform: `translateY(${moveY})` }">
          <li
            v-for="(lyric, index) in lyricArr"
            :class="{ active: index == currentIndex }"
            :key="index"
          >
            {{ lyric.lyric }}
          </li>
        </ul>
      </div>
      <div class="controls">
        <label>{{ currentTime | formattime }}</label>
        <input type="range" min="0" max="100" v-model="rangetime" />
        <label>{{ totalTime | formattime }}</label>
      </div>
      <div class="btn">
        <div class="prve" @click.stop="prvemusic">
          <img src="../assets/images/prve_icon.png" alt="" />
        </div>
        <div class="play" @click.stop="changeplay">
          <img v-if="isplay" src="../assets/images/stop_icon.png" alt="" />
          <img v-else src="../assets/images/play_icon.png" alt="" />
        </div>
        <div class="next" @click.stop="nextmusic">
          <img src="../assets/images/next_icon.png" alt="" />
        </div>
        <div class="list" @click="showplaylist = true">
          <img src="../assets/images/list_icon.png" alt="" />
        </div>
        <transition
          enter-active-class="animate__animated animate__fadeInUp"
          leave-active-class="animate__animated animate__fadeOutDown"
        >
          <div class="playlist" v-show="showplaylist">
            <h2>播放列表</h2>
            <img
              @click="showplaylist = false"
              class="exit"
              src="../assets/images/esc_icon.png"
              alt=""
            />
            <ul>
              <li
                :class="{ active: currentMusic.id == music.id }"
                v-for="(music, index) in playlist"
                :key="index"
                @click.stop="$emit('play', music)"
              >
                <span>{{ index + 1 }}.</span>
                <h3>{{ music.name }}</h3>
                <i @click.stop="delmusic(playlist, index)"></i>
              </li>
            </ul>
            <div class="single" @click.stop="playmode = 'single'">
              <img src="../assets/images/single_icon.png" />
            </div>
            <div class="round" @click.stop="playmode = 'random'">
              <img src="../assets/images/random_icon.png" />
            </div>
            <div class="list_loop" @click.stop="playmode = 'list'">
              <img src="../assets/images/listloop_icon.png" />
            </div>
          </div>
        </transition>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      backgroundImage: null,
      lyric: null,
      showplaylist: false,
      playindex: 0,
      playmode: "list", //single 单曲循环 random 随机播放
    };
  },
  props: {
    currentMusic: {
      type: Object,
      define: () => {
        return null;
      },
    },
    playlist: {
      type: Array,
      define: () => {
        return [];
      },
    },
    isplay: {
      type: Boolean,
      define: true,
    },
    currentTime: {
      type: Number,
      define: 0,
    },
    totalTime: {
      type: Number,
      define: 0,
    },
  },
  created() {
    let url = this.currentMusic.picUrl || this.currentMusic.al.picUrl;
    this.backgroundImage = `url(${url}?imageView&thumbnail=50y50&quality=15&tostatic=0)`;
    this.getlyriclist();
  },
  updated() {
    this.getlyriclist();
  },
  methods: {
    async getlyriclist() {
      await this.axios.get(`/lyric?id=${this.currentMusic.id}`).then((res) => {
        this.lyric = res.lrc.lyric;
      });
    },
    changeplay() {
      this.$parent.changeplay();
    },
    findMusicIndex() {
      this.playlist.forEach((item, index) => {
        if (item.id == this.currentMusic.id) {
          this.playindex = index;
        }
      });
    },
    changemode() {
      if (this.playmode == "single") {
        //单曲循环
        this.$emit("changetime", 0);
      } else if (this.playmode == "random") {
        //随机循环
        let randomindex = Math.floor(Math.random() * this.playlist.length);
        let currentMusic = this.playlist[randomindex];
        this.$emit("play", currentMusic);
      }
    },
    prvemusic() {
      this.findMusicIndex();
      if (this.playmode != "list") {
        return this.changemode();
      }
      if (this.playindex == 0) {
        this.playindex = this.playlist.length - 1;
      } else {
        this.playindex--;
      }
      let currentMusic = this.playlist[this.playindex];
      this.$emit("play", currentMusic);
    },
    nextmusic() {
      this.findMusicIndex();
      if (this.playmode != "list") {
        return this.changemode();
      }
      if (this.playindex == this.playlist.length - 1) {
        this.playindex = 0;
      } else {
        this.playindex++;
      }
      let currentMusic = this.playlist[this.playindex];
      this.$emit("play", currentMusic);
    },
    delmusic(playlist, index) {
      for (let i = 0; i <= playlist.length - 1; i++) {
        if (i == index) {
          playlist.splice(i, 1);
        }
      }
    },
  },
  computed: {
    lyricArr() {
      if (!this.lyric) {
        return [];
      }
      let lyricArr = this.lyric.split("\n");
      lyricArr.pop();
      let reg = /\[(\d+):(\d+\.\d+)\]([\s\S.]*)/;
      return lyricArr.map((value) => {
        if (reg.test(value)) {
          return {
            time: parseInt(RegExp.$1 * 60) + parseFloat(RegExp.$2),
            lyric: RegExp.$3.length < 1 ? "...伴奏中..." : RegExp.$3,
          };
        }
      });
    },
    currentIndex() {
      let index = 0;
      if (this.lyricArr.length < 1 || this.currentTime < 1) {
        return 0;
      }
      for (let i = 0; i < this.lyricArr.length; i++) {
        if (i >= this.lyricArr.length - 1) return i;
        if (
          this.currentTime >= this.lyricArr[i].time &&
          this.currentTime < this.lyricArr[i + 1].time
        ) {
          index = i;
          return i;
        }
      }
      return index;
    },
    moveY() {
      let y = 0;
      y = this.currentIndex * 30;
      if (y < 90) {
        y = 90 - y;
        return y + "px";
      } else {
        y = y - 90;
        return -y + "px";
      }
    },
    rangetime: {
      get() {
        return 100 * (this.currentTime / this.totalTime);
      },
      set(value) {
        let currentTime = this.totalTime * (value / 100);
        this.$emit("changetime", currentTime);
      },
    },
  },
  filters: {
    formattime(time) {
      let m = Math.floor(time / 60);
      let s = Math.floor(time % 60);
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      return m + ":" + s;
    },
  },
};
</script>

<style lang="scss" scoped>
.full {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .bg {
    position: relative;
    width: 100vh;
    height: 100vh;
    background: no-repeat center center;
    background-size: contain;
    transform: scale(1.5);
    filter: blur(30px);
  }
  .content {
    text-align: center;
    width: 100vw;
    & span {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 20px;
      height: 20px;
      background: url(../assets/images/exit_icon.png) no-repeat;
      background-position: 0 0;
      background-size: contain;
      z-index: 5;
    }
    .music-img {
      display: inline-block;
      position: absolute;
      top: 20%;
      left: 50%;
      margin-left: -100px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      z-index: 5;
      animation: rotate 5s linear infinite;
    }
    .author {
      width: 70%;
      text-align: center;
      position: absolute;
      text-align: center;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      overflow: hidden;
      white-space: nowrap;
      p {
        font-size: 16px;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.8);
        overflow: hidden;
        text-overflow: ellipsis;
      }
      h3 {
        display: inline-block;
        white-space: nowrap;
        padding-top: 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .play_icon {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 32%;
      right: 50%;
      margin-right: -10px;
      z-index: 101;
    }
  }
  .lyric {
    width: 100%;
    height: 31vh;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    text-align: center;
    position: absolute;
    bottom: 100px;
    z-index: 101;
    overflow: hidden;
    ul {
      position: absolute;
      left: 0;
      width: 100%;
      height: 180x;
      li {
        width: 80%;
        height: 30px;
        line-height: 30px;
        margin: auto;
        overflow: hidden;
        white-space: nowrap;
        &.active {
          color: #fff;
        }
      }
    }
  }
  .controls {
    position: absolute;
    bottom: 70px;
    display: flex;
    width: 100%;
    justify-content: center;
    z-index: 101;
    color: rgba(255, 255, 255, 0.8);
    label {
      padding: 0 10px;
    }
    input {
      width: 200px;
    }
  }
  .btn {
    position: absolute;
    bottom: 20px;
    display: flex;
    z-index: 101;
    width: 100%;
    justify-content: center;
    img {
      width: 20px;
      height: 20px;
      margin: 0 20px;
    }
    .playlist {
      position: absolute;
      bottom: -20px;
      z-index: 102;
      height: 300px;
      width: 100%;
      overflow: auto;
      background: #fff;
      color: rgba(0, 0, 0, 0.5);
      h2 {
        text-align: center;
        font-weight: bold;
        color: #e3b7e5;
        font-size: 20px;
        line-height: 30px;
      }
      .exit {
        position: absolute;
        top: 5px;
        left: 10px;
        margin: 0;
      }
      ul {
        li {
          display: flex;
          line-height: 30px;
          font-size: 16px;
          overflow: hidden;
          white-space: nowrap;
          position: relative;
          span {
            width: 30px;
            text-align: center;
          }
          h3 {
            display: inline;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          i {
            width: 12px;
            height: 12px;
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background: url(../assets/images/del_icon.png) no-repeat;
            background-position: 0 0;
            background-size: contain;
          }
        }
        .active {
          color: #f0f;
          font-weight: bold;
        }
      }
      .single {
        position: absolute;
        top: 5px;
        right: 70px;
        img {
          margin: 0;
        }
      }
      .round {
        position: absolute;
        top: 5px;
        right: 40px;
        img {
          margin: 0;
        }
      }
      .list_loop {
        position: absolute;
        top: 5px;
        right: 10px;
        img {
          margin: 0;
        }
      }
    }
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
